@tailwind base;

@tailwind components;
@layer utilities {
  .vf-theme-dark,
  .vf-theme-light {
    box-sizing: border-box;
    --os-size: 10px;
    --os-padding-perpendicular: 2px;
    --os-padding-axis: 2px;
    --os-track-border-radius: 10px;
    --os-handle-interactive-area-offset: 4px;
    --os-handle-border-radius: 10px;
  }

  .vf-theme-dark {
    --os-handle-bg: rgba(0, 0, 0, 0.44);
    --os-handle-bg-hover: rgba(0, 0, 0, 0.55);
    --os-handle-bg-active: rgba(0, 0, 0, 0.66);
  }

  .vf-theme-light {
    --os-handle-bg: rgba(255, 255, 255, 0.44);
    --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
    --os-handle-bg-active: rgba(255, 255, 255, 0.66);
  }
}

@layer components {
  .vuefinder {
    position: relative;

    * {
      touch-action: manipulation;
    }

    .vuefinder.dark {
      color-scheme: dark;
    }

    @import "_effects.scss";
    @import "_forms.scss";
    @import "_scrollbars.scss";

    // Previews
    @import "_previews.scss";

    // Components
    @import "components/_action_message.scss";
    @import "components/_breadcrumb.scss";
    @import "components/_context_menu.scss";
    @import "components/_explorer.scss";
    @import "components/_drag_item.scss";
    @import "components/_folder_indicator.scss";
    @import "components/_folder_loader_indicator.scss";
    @import "components/_item.scss";
    @import "components/_item_icon.scss";
    @import "components/_message.scss";
    @import "components/_statusbar.scss";
    @import "components/_tree_view.scss";
    @import "components/_toast.scss";
    @import "components/_toolbar.scss";
    @import "components/_vuefinder.scss";

    // Modals
    @import "components/modals/_modal__layout.scss";
    @import "components/modals/_modal_about.scss";
    @import "components/modals/_modal_archive.scss";
    @import "components/modals/_modal_delete.scss";
    @import "components/modals/_modal_header.scss";
    @import "components/modals/_modal_message.scss";
    @import "components/modals/_modal_move.scss";
    @import "components/modals/_modal_new_file.scss";
    @import "components/modals/_modal_new_folder.scss";
    @import "components/modals/_modal_preview.scss";
    @import "components/modals/_modal_rename.scss";
    @import "components/modals/_modal_unarchive.scss";
    @import "components/modals/_modal_upload.scss";
  }

  /*
    DragSelect selector appends to body
   */
  .vf-explorer-selector {
    @apply border border-slate-500 bg-slate-300 opacity-50 #{!important};
  }

  kbd {
    @apply px-2 py-1 text-xs font-semibold text-gray-500 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-300 dark:border-gray-500;
  }
}

@tailwind utilities;

@import "overlayscrollbars/styles/overlayscrollbars.css";
